<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:04:56
 * @LastEditors: charles
 * @LastEditTime: 2021-06-29 22:00:03
-->
<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <!-- 体部 -->
    <div class="center">
      <!-- 设置居中容器 -->
      <div class="wrapper">
        <div class="inner_content">
          <!-- 标题 -->
          <div class="top">{{ articleList.title }}</div>
          <!-- 作者 发表时间 阅读次数 -->
          <div class="timer">
            <span>作者：{{ this.author }}</span
            >&nbsp;
            <span>发表时间：{{ articleList.publishTime | fmtDate }}</span
            >&nbsp;
            <span>阅读次数：{{ articleList.readTimes }}</span>
          </div>
          <!-- 文章内容 -->
          <!-- v-html 解析代码片段 v-bind 绑定动态变量 v-if v-else v-for -->
          <div class="bottom" v-html="articleList.content">
            <!-- {{articleList.content}} -->
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>
<script>
import { get, post } from "@/utils/request.js";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      // 存放vue变量
      id: "",
      // 文章详情
      articleList: {},
      // 文章作者
      author: "",
    };
  },
  methods: {
    // 根据不同文章id获取文章详情
    findArticleById() {
      get("/index/article/findById", { id: this.id }).then((res) => {
        // console.log(res,'获取文章详情');
        this.articleList = res.data;
        this.author = res.data.baseUser.realname;
        // console.log(this.author,"获取文章作者");
      });
    },
  },
  created() {
    // 接收路由传递的参数
    console.log(this.$route.query.id);
    this.id = this.$route.query.id;
    this.findArticleById();
  },
};
</script>
<style lang="scss">
.center {
  padding: 3em;
  background-color: #ecf6f2;
  .wrapper {
    .inner_content {
      background-color: white;
      // 最小高度
      min-height: 500px;
      .top {
        color: #28b392;
        font-size: 20px;
        text-align: center;
        cursor: pointer;
      }
      .top:hover {
        color: brown;
      }
      .timer {
        margin-top: 10px 0;
        text-align: center;
        font-size: 16px;
        border-bottom: 1px solid black;
      }
    }
  }
}
</style>